<template>
	<div class="cmp-imitatePoints">
		<div class="cont-title">
			<span>考点练习</span>
			<el-button @click="back" type="primary" size="small">返回</el-button>
		</div>
		<div class="imitate-subheader">
			<div class="subheader">
				<i class=""></i>
				<span>请选择试卷及试题量</span>
			</div>
		</div>
		<div class="imitate-list2">
			<div class="item">
				<div class="item-cont">
					<i class="select-icon"></i>
					<span>单选题</span>
					<div class="num">
						<input @focus="inputSelect($event)" type="text" v-model="radioNum" />
						/共{{info.radioQuestion}}题
					</div>
				</div>
				<div class="item-option">
					<div class="option-item" @click="start(1)">开始练习</div>
				</div>
			</div>
			<div class="item">
				<div class="item-cont">
					<i class="select-icon"></i>
					<span>多选题</span>
					<div class="num">
						<input @focus="inputSelect($event)" type="text" v-model="multiNum" />
						/共{{info.multiQuestion}}题
					</div>
				</div>
				<div class="item-option">
					<div class="option-item" @click="start(2)">开始练习</div>
				</div>
			</div>
			<div class="item">
				<div class="item-cont">
					<i class="select-icon"></i>
					<span>判断题</span>
					<div class="num">
						<input @focus="inputSelect($event)" type="text" v-model="judgeNum" />
						/共{{info.judgeQuestion}}题
					</div>
				</div>
				<div class="item-option">
					<div class="option-item" @click="start(3)">开始练习</div>
				</div>
			</div>
			<!-- <div class="num">
				单选题
				<input type="text" v-model="info.select1" @input="inputChange('1', 'radioQuestion')" />
				/共{{info.radioQuestion}}题
			</div>
			<div class="num">
				多选题
				<input type="text" v-model="info.select2" @input="inputChange('2', 'multiQuestion')" />
				/共{{info.multiQuestion}}题
			</div>
			<div class="num">
				判断题
				<input type="text" v-model="info.select3" @input="inputChange('3', 'judgeQuestion')" />
				/共{{info.judgeQuestion}}题
			</div> -->
		</div>
	</div>
</template>

<script>
	import {
		getSimulationDirApi,
		getPointsExamApi,
		creatPointsExamApi
	} from '@/api/Match'
	export default {
		props: {
			dir: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				list: [],
				info: {},
				radioNum: 0,
				multiNum: 0,
				judgeNum: 0
			}
		},
		created() {

		},
		methods: {
			inputSelect(e) {
				e.currentTarget.select()
			},
			back() {
				this.$emit('imitateBack', 1)
			},
			start(item) {
				let num = 0
				if (item == 1) {
					num = this.radioNum
				} else if (item == 2) {
					num = this.multiNum
				} else if (item == 3) {
					num = this.judgeNum
				}
				if (num == 0) {
					this.$message.error('请输入要练习的题型数量')
					return false
				}
				creatPointsExamApi({
					categoryid: this.dir,
					questionCout: num,
					questionType: item,
				}).then(res => {
					if (res.code == 200) {
						this.$router.push({
							path: '/Exam',
							query: {
								id: res.paperId
							}
						})
					}
				})
			},
			inputChange(index, type) {
				if (this.info['select' + index] >= this.info[type]) {
					this.list[index]['select' + type] = item['quCount' + type]
				}
			},
			getExam() {
				getPointsExamApi({
					categoryid: this.dir
				}).then(res => {
					this.info = res
				})
			}
		},
		watch: {
			dir: {
				handler(newV, oldV) {
					this.getExam()
				},
				immediate: true
			}
		}
	}
</script>

<style lang="less" scoped>
	.cmp-imitatePoints {
		padding: 0 60px;

		.cont-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30px 0 15px;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 22px;
		}

		.imitate-subheader {
			display: flex;
			height: 72px;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;

			.subheader {
				display: flex;
				align-items: center;
			}

			i {
				display: block;
				width: 16px;
				height: 16px;
				background: url(../assets/img/question_icon1.png)no-repeat;
				background-size: 100% 100%;
				margin-right: 8px;
			}
		}

		.imitate-list2 {
			.item {
				height: 80px;
				margin-bottom: 16px;
				background: #F4F8FF;
				border-radius: 11px;
				padding: 0 16px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.item-cont {
			display: flex;
			align-items: center;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.select-icon {
			display: block;
			width: 16px;
			height: 16px;
			border-radius: 16px;
			border: 1px solid #FCDE14;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 11px;

			&:before {
				display: block;
				content: "";
				width: 10px;
				height: 10px;
				border-radius: 10px;
				background-color: #FCDE14;
			}
		}

		.num {
			font-size: 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			// width: 55px;
			padding: 6px 10px;
			// height: 21px;
			background: #FCDE14;
			border-radius: 10px;
			margin-left: 16px;
			display: flex;
			align-items: center;

			input {
				width: 40px;
				height: 20px;
				background-color: rgba(0, 0, 0, 0);
				border: 1px solid #fff;
				border-radius: 2px;
				margin: 0 3px;
				outline: none;

			}
		}

		.item-option {
			display: flex;
			align-items: center;
		}

		.option-item {
			text-align: center;
			line-height: 33px;
			margin-left: 16px;
			width: 85px;
			height: 33px;
			background: rgba(10, 140, 255, 0);
			border-radius: 4px;
			border: 1px solid #0091FF;
			font-size: 15px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #0091FF;
			cursor: pointer;
		}
	}
</style>